<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar" :style="'height:'+tophight.top+'px;'"></view>
		<view class="status_title" :style="'height:'+tophight.height+'px;'">
			课程
		</view>
		<!-- #endif -->
		<view class="input-view">
			<view class="search" @click="onSearch">
				<u-input placeholder="搜索经络/穴位/病症/课程" shape="circle" prefixIcon="search" disabled style="pointer-events: none;"></u-input>
			</view>
			<view class="icon" @click="onHistory">
				<image src="@/static/icon/search-course.png"></image>
			</view>
		</view>
		<view class="tab">
			<u-tabs :list="list" lineColor="#ff702a" lineWidth="40" :inactiveStyle="{color:'#5B5E63'}" :activeStyle="{fontWeight: 'bold',color: '#32363C'}" @change="changeTab"></u-tabs>
		</view>
		<view class="tag-view">
			<scroll-view scroll-x scroll-with-animation class="scroll">
				<view class="tag-list">
					<view class="tag-item" :class="{ 'active': index == num }" v-for="(item,index) in tagList" :key="index" @click="handleTag(item,index)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="tag-item">
				<text>诊断</text>
				<view class="icon"><image class="image" src="@/static/icon/filter.png"></image></view>
			</view> -->
		</view>
		<view class="paging">
			<z-paging ref="paging" v-model="dataList" :auto="false" :fixed="false" @query="onQueryList">
				<view class="paging-item" v-for="(item,index) in dataList" :key="item.videoInfoId" @click="to_video(item.videoInfoId)">
					<view class="cover">
						<view>
							<u-image :src="item.videoImg" :lazy-load="true" v-if="item.videoImg" radius="12"></u-image>
							<u-image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a8dedf10-b511-4c59-8ac2-058b823b01bf.png" :lazy-load="true" radius="12" v-else></u-image>
						</view>
						<view class="play">
							<image src="@/static/icon/play.png"></image>
						</view>
						<view class="count">
							<image src="@/static/icon/count.png"></image>
							<text>{{numberToWan(item.viewCounts)}}</text>
						</view>
						<view class="duration">
							{{item.durationCounts}}
						</view>
					</view>
					<view class="name">{{item.headline}}</view>
					<view class="dec">{{item.subhead}}</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {videoInfo,dict} from '../../api/request.js'
	export default {
		data(){
			return{
				num: null,
				tophight:{},
				list:[],
				tagList:[],
				labelId:null,
				//列表
				dataList:[],
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			this.tophight = uni.getMenuButtonBoundingClientRect()
			// #endif
			this.getVideoType()
		},
		mounted() {
			this.$refs.paging.reload()
		},
		methods:{
			changeTab(data) {
				this.labelId = data.id
			    this.tagList = this.list[data.index].children
				this.num = null
				this.$refs.paging.reload()
			},
			handleTag(data,index){
				this.labelId = data.id
				this.num = index
				this.$refs.paging.reload()
			},
			numberToWan(num){
				if(num >= 10000){
					return (num / 10000).toFixed(2)+'万'
				}else{
					return num
				}
			},
			getVideoType(){
				listing(dict)
				.then(res=>{
					if(res.data.code == 200){
						this.list = res.data?.data
						this.tagList = res.data?.data[0].children
					}
				})
			},
			onQueryList(page, pageSize){
				uni.showLoading({title:'加载中'})
				listing(videoInfo+`/${this.num == null ?'first': 'second'}?label=${this.labelId}&pageNum=${page}&pageSize=${pageSize}`)
				.then(res=>{
					if(res.data.code == 200){
						this.$refs.paging.complete(res.data.data.records)
						uni.hideLoading();
					}else{
						this.$refs.paging.complete(false)
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.msg
						})
						uni.hideLoading();
					}
				})
				.catch(err=>{
					uni.hideLoading();
				})
			},
			//跳转到视频
			to_video(videoInfoId){
				uni.navigateTo({
					url:'../../packagesVideo/video/video?id='+videoInfoId
				})
			},
			onSearch(){
				uni.navigateTo({
					url:'../../packagesVideo/video/search'
				})
			},
			onHistory(){
				uni.navigateTo({
					url:'../../packagesVideo/video/history'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7ea9b3bd-9c97-44a8-91f4-9dca1bb92866.png');
		background-size: cover;
		// background-position: center;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		.status_title{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
		}
		.input-view{
			display: flex;
			justify-content: space-between;
			align-items: center;
			/* #ifdef APP-PLUS || H5 */
			padding: 30rpx 30rpx 0;
			/* #endif */
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;
			.search{
				flex: 1;
				margin-right: 40rpx;
				/deep/.u-input{
					background: #fff !important;
					color: #898783;
				}
				/deep/.u-icon__icon{
					font-size: 40rpx !important;
				}
			}
			.icon{
				image{
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}
		}
		.tab{
			margin: 32rpx 0;
		}
		.tag-view{
			padding: 0 30rpx;
			.scroll{
				width: 100%;
				white-space: nowrap;
				.tag-list{
					display: flex;
					align-items: center;
					.tag-item{
						background: #fff;
						padding: 10rpx 20rpx;
						border-radius: 12rpx;
						box-sizing: border-box;
						margin-right: 16rpx;
						.icon{
							.image{
								width: 32rpx;
								height: 32rpx;
							}	
						}
						&:last-child{
							margin-right: 0;
						}
					}
					.active{
						background: #ff702a;
						color: #fff;
					}
				}
			}
		}
		.paging{
			/* #ifdef APP-PLUS || H5 */
			// height: calc(100vh - 400rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 526rpx);
			/* #endif */
			padding: 32rpx 30rpx;
			&-item{
				margin-bottom: 20rpx;
				box-sizing: border-box;
				&:nth-child(2n){
					margin-right: 0;
				}
				.cover{
					position: relative;
					font-size: 24rpx;
					color: #fff;
					/deep/.u-image{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					/deep/.u-image__image{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					/deep/.u-image__error{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					.play{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						image{
							width: 56rpx;
							height: 56rpx;
						}
					}
					.count{
						position: absolute;
						bottom: 20rpx;
						left: 20rpx;
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.duration{
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
					}
				}
				.name{
					font-size: 28rpx;
					font-weight: bold;
					padding: 10rpx 0;
					width: 340rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.dec{
					font-size: 24rpx;
					color: #59554e;
					width: 340rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	/deep/ .zp-paging-container-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/deep/.uicon-search{
		font-size: 40rpx !important;
	}
	/deep/.data-v-0f887f1e{
		width: 100%;
	}
</style>